<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画布学习</title>
</head>
<body>
    <!-- 1.创建画布 -->
    <!-- 特点：默认画布是没有边框的，可以使用style属性设置样式，id属性是用在js中的-->
    <!-- width是给画布设置一个宽度，height是给画布设置一个高度  -->
    <canvas id='myCanvas' width='800' height='400' style="background-color: #ccc;"></canvas>
</body>
<script>
    //开始绘制图像
    //1.获取canvas元素
    var c = document.getElementById("myCanvas");
    //2.获取canvas的实例对象
    var ctx = c.getContext("2d")
    // console.log(ctx);        //对象
    //3.使用ctx对象中的方法绘制图形
    
    //绘制一个正方形
    // ctx.fillStyle = 'red'       //填充色
    // ctx.fillRect(100,100,300,100) //x,y,widht,height

    //绘制线条
    // ctx.moveTo(800,0);   //x,y    
    // ctx.lineTo(0,400);  //x,y
    // ctx.stroke()        //将两个坐标点连接起来

    //绘制一个圆
    // ctx.beginPath();
    // ctx.arc(200,200,100,0,2*Math.PI); //x
    // ctx.stroke();

    //绘制文本
    // ctx.font = '38px Arial';
    // ctx.fillText('Hello world!',100,100)  //实心文本
    // ctx.strokeText('Hello world!',100,100);

    //渐变色
    //1.创建渐变色(线性渐变)
    // var myColor = ctx.createLinearGradient(600,0,0,300);  //x,y,x1,y1

    // myColor.addColorStop(0,'red');     //第一个参数是一个0-1之间的值，第二个参数是一个颜色
    // myColor.addColorStop(1,'#fff');
    // ctx.fillStyle = myColor;
    // ctx.fillRect(0,0,600,300) //x,y,widht,height

    //2.径向渐变
    // var myColor = ctx.createRadialGradient(0,0,10,100,100,10)
    // myColor.addColorStop(0,'red');
    // myColor.addColorStop(1,'teal');
    // ctx.fillStyle = myColor;
    // ctx.fillRect(0,0,600,300) //x,y,widht,height

    //图像
    //实例化一个图片对象
    var img = new Image();
    //改变src属性
    img.src='../../1-html&css/day02/响应报文.png'
    img.onload = function() {
        ctx.drawImage(img, 100,100,400,300);   //将图片添加到画布中
    }
</script>
</html>